<template>
  <view class="container">
    <div class="page-top">
    </div>
    <div class="gybody">
      <div class="denglu1">
        <ul class="denglu_bd hzly">
          <li class="input">
            <van-field placeholder="请输入注册手机号" :value="userInfo.phone" maxlength="18"
                       label="账号" @change="doPhoneInput"></van-field>
          </li>
          <li class="input">
            <van-cell-group :border="false">
              <van-field placeholder="请输入验证码" :value="userInfo.code" maxlength="20" label="验证码"
                         :border="false" @change="doCodeInput">
                <van-button slot="button" size="small" type="primary" :disabled="verifyBtnStatus" @click="doSendVerifyClick">{{
                    verifyTxt
                  }}
                </van-button>
              </van-field>
            </van-cell-group>
          </li>

          <li class="msg flexce">
            <text class="msg_input" @click="toRegister">快速注册</text>
          </li>
          <li class="anniu  denglu-anniu">
            <view class="button" @click="toDoLogin">登录</view>
          </li>
        </ul>

      </div>
      <div class="denglu2">


      </div>


    </div>
  </view>
</template>
<script>
import {doSendVerify, doLogin} from "../../../requests/merchant";
import Toast from "../../../../static/vant/toast/toast";

var $this
export default {
  name: "index",
  data() {
    return {
      userInfo: {
        phone: "",
        code: "",
        type: "2"
      },
      verifyTxt: "发送验证码",
      verifyBtnStatus:false
    }
  },
  methods: {
    doPhoneInput(e) {
      $this.userInfo.phone = e.mp.detail;
    },
    doCodeInput(e) {
      $this.userInfo.code = e.mp.detail;
    },
    doSendVerifyClick() {
      doSendVerify($this.userInfo.phone).then(res => {
        let resp = res.data
        if (resp.code === 0) {
          let time = 60
          let intervalId = setInterval(() => {
            if (time > 0) {
              time--;
              this.verifyBtnStatus = true;// 防止再次触发点击事件
              $this.verifyTxt = `${time}S后重新发送`;
            } else {
              $this.verifyTxt = '重新发送验证码';
              this.verifyBtnStatus = false;
              if (intervalId) {
                clearInterval(intervalId);
              }
            }
          }, 1000)
          Toast.success('发送成功')
        }
      })
    },
    toDoLogin() {
      if (this.userInfo.username === "") {
        Toast.fail('请输入手机号');
        return false;
      }
      if (this.userInfo.code === '') {
        Toast.fail('请输入验证码');
        return false;
      }
      mpvue.login({
        success(res){
          let code = res.code
          // 利用code 作为参数传到服务端接口
          // 接口返回openid后再执行登录

          // doLogin(this.userInfo).then(res => {
          //   let resp = res.data
          //   if (resp.code === 0) {
          //     mpvue.redirectTo({
          //       url: "/pages/merchant/index/main",
          //     });
          //   }else{
          //     console.log(resp.msg)
          //   }
          // })
        }
      })
    },
    toFindPassword(){
       mpvue.navigateTo({
        url: "/pages/merchant/find_password/main",
      });
    },
    toLogin() {
      mpvue.switchTab({
        url: "/pages/merchant/login/main",
      });
    },
    toRegister() {
      mpvue.navigateTo({
        url: "/pages/merchant/register/main",
      });
    },
  },
  created() {
    $this = this
  }
}
</script>
<style>
@import "index.css";
</style>
